<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
        <title>滑动切换的注册登录界面</title>
        <link rel="stylesheet" href="../css/81.css">
        <!-- 新增样式 -->
        <style>

        </style>

    </head>
    <body>
        <div class="container" id="main">
            <div class="form-box">
                <!-- 注册 -->
                <div class="register-box hidden">
                    <form action="http://localhost:9999/user/register" method="post">
                        <h1>register</h1>
                        <span th:if="${!#strings.isEmpty(errorInfo)}" th:text="${errorInfo}" style="color: red;font-size: 15px;margin-left: 60px"></span>
                        <input type="text" placeholder="用户名" name="username" style="margin-left: 50px">
                        <input type="password" placeholder="密码" name="password" style="margin-left: 50px">
                        <input type="password" placeholder="确认密码" name="confirmPassword" style="margin-left: 50px">
                        <button type="submit" style="margin-left: 50px">注册</button>
                    </form>
                </div>
                <!-- 登录 -->
                <div class="login-box">
                    <form action="http://localhost:9999/user/login">
                        <h1>login</h1>
                        <span th:if="${!#strings.isEmpty(errorInfo)}" th:text="${errorInfo}" style="color: red; font-size: 15px; margin-left: 50px"></span>
                        <input type="text" placeholder="用户名" name="username" style="margin-left: 50px">
                        <input type="password" placeholder="密码" name="password" style="margin-left: 50px">
                        <button type="submit" style="margin-left: 50px">登录</button>
                    </form>
                </div>
            </div>
            <div class="con-box left">
                <h2>欢迎来到<span>NB动漫</span></h2>
                <p>快来观看你的专属<span>动漫</span>吧</p>
                <br>
                <br>
                <p>已有账号</p>
                <button id="login">去登录</button>
            </div>
            <div class="con-box right">
                <h2>欢迎来到<span>NB动漫</span></h2>
                <p>快来看看你收藏的<span>动漫</span>吧</p>
                <br>
                <br>
                <p>没有账号？</p>
                <button id="register">去注册</button>
            </div>
        </div>
        <script>
            // 要操作到的元素
            let login = document.getElementById('login');
            let register = document.getElementById('register');
            let form_box = document.getElementsByClassName('form-box')[0];
            let register_box = document.getElementsByClassName('register-box')[0];
            let login_box = document.getElementsByClassName('login-box')[0];
            // 去注册按钮点击事件
            register.addEventListener('click', () => {
                form_box.style.transform = 'translateX(80%)';
                login_box.classList.add('hidden');
                register_box.classList.remove('hidden');
            })
            // 去登录按钮点击事件
            login.addEventListener('click', () => {
                form_box.style.transform = 'translateX(0%)';
                register_box.classList.add('hidden');
                login_box.classList.remove('hidden');
            })
        </script>
    </body>
</html>